<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-for实例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <h1>v-for实例</h1>
  <hr>
  <div id="app">
    <li v-for="item in sortedItems">
      {{item}}
    </li>
    <hr>
    <li v-for="(student,index) in sortedStudents">
      {{index+1}}:{{student.name}}-{{student.age}}
    </li>
  </div>
  <script type="text/javascript">
  var app = new Vue({
    el:'#app',
    data:{
      items:[12,23,7,34,23,34,45,54],
      students:[
        {name:'Tom',age:20},
        {name:'Jim',age:18},
        {name:'King',age:30},
        {name:'Adam',age:21},
      ]
    },
    computed:{
      sortedItems:function(){
        return this.items.sort(sortNumber);
      },
      sortedStudents:function(){
        return sortByKey(this.students,'age');
      }
    }
  });
  function sortNumber(a,b){
    return a-b;
  }
  function sortByKey(array,key){
    return array.sort(function(a,b){
      var x=a[key];
      var y=b[key];
      return ((x<y)?-1:((x>y)?1:0));
    });
  }
  </script>
</body>
</html>